<template>
  <div class="app-container">
    <div class="search-container">
      <!-- 头部查询表单 -->
      <el-form ref="QueryFormRef" :inline="true" :model="params">
        <el-form-item>
          <el-button type="primary" @click="resetQuery">
            <el-icon>
              <refresh/>
            </el-icon>
            查询全部
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="fileTableLoading" :data="fileDataList" border
                highlight-current-row stripe
                @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="模型id" prop="id" width="175"/>
        <el-table-column align="center" label="模型文件" min-width="150" prop="model">
          <template #default="scope">
            <el-button link type="primary" @click="toggleDialog(scope.row.model)">
              {{ decodeURI(scope.row.model.split('/').slice(-1)[0]) }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-if="total > 0"
          v-model:limit="params.limit"
          v-model:page="params.page"
          v-model:total="total"
          @pagination="handleQuery"
      />
    </el-card>
    <preview-model v-model="previewModelDialog.visible" :url="previewModelDialog.url"/>
  </div>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref} from "vue";
import {Refresh} from "@element-plus/icons-vue";
import Pagination from "@/components/pagination.vue";
import PreviewModel from "@/components/preview-model.vue";
/**
 * File ——> 实体大驼峰
 * file ——> 实体小驼峰
 * 模型 ——> 实体中文名
 */
import {getFilePageList} from "@/apis/file";

const QueryFormRef = ref();

const fileTableLoading = ref(false);
const selectionIds = ref([]);

const total = ref(0);

const params = reactive({
  page: 1,
  size: 10,
  key: ""
});

const fileDataList = ref([]);

const dialog = reactive({
  title: "",
  visible: false,
});
const previewModelDialog = reactive({
  visible: false,
  url: ""
})


/** 查询 */
const handleQuery = () => {
  fileTableLoading.value = true;
  getFilePageList(params)
      .then(({data}) => {
        fileDataList.value = data.list;
        total.value = data.totalCount;
      })
      .finally(() => {
        fileTableLoading.value = false;
      });
}

/** 重置查询 */
const resetQuery = () => {
  QueryFormRef.value.resetFields();
  handleQuery();
}

/** 行checkbox 选中事件 */
const handleSelectionChange = selection => {
  selectionIds.value = selection.map((item) => item.id);
}

/** 打开模型预览模型 */
const toggleDialog = url => {
  previewModelDialog.visible = true
  previewModelDialog.url = url
}

onMounted(() => {
  handleQuery();
});
onActivated(() => {
  handleQuery();
})
</script>
<style scoped>
:deep(.pagination) {
  display: flex;
  justify-content: center;
}
</style>

